<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件绑定</title>
    <script type="text/javascript">
        window.onload = function() {
            // 点击按钮以后，弹出一个内容
            // var btn01 = document.getElementById("btn01");
            // btn01.onclick = function (params) {
            //     alert("1");
            // }

            // btn01.addEventListener("click", function() {
            //     alert(1);
            // }, false);

            // btn01.addEventListener("click", function () {
            //     alert(2);
            // }, false);
            
            // 兼容IE8浏览器
            // 定义一个函数，用来为指定元素绑定响应函数
            function bind(obj, eventStr, callback) {
                if(obj.addEventListener) {
                    obj.addEventListener(eventStr, callback, false);
                } else {
                    // this是谁由调用方式决定
                    // obj.attachEvent("on" + eventStr, callback);
                    obj.attachEvent("on" + eventStr, function() {
                        // 在匿名函数中调用回调函数
                        callback.call(obj);
                    });
                }
            }

            bind(btn01, "click", function() {
               alert(this); 
            });

        }
    </script>
</head>
<body>
    <button id="btn01">btn01</button>
</body>
</html>